<div id="containers_wrapper" ng-controller="horizon.dashboard.project.containers.ContainersController as cc" class="row">
  <div class="col-md-3">
    <div class="row hz-container-actions">
      <div class="col-xs-12 hz-container-action">
        <button type="button" class="btn btn-default" ng-click="cc.createContainer()">
          <span class="fa fa-plus"></span>
          <translate>Container</translate>
        </button>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12">
        <hz-magic-search-context filter-facets="cc.filterFacets">
          <hz-magic-search-bar></hz-magic-search-bar>
        </hz-magic-search-context>
        <uib-accordion class="hz-container-accordion" ng-if="cc.model.containers.length > 0">
          <div uib-accordion-group ng-repeat="container in cc.model.containers"
                           ng-class="{'panel-primary': container.name === cc.model.container.name}"
                           class="panel-default"
                           ng-click="cc.selectContainer(container)">
            <uib-accordion-heading>
             <div ng-click="cc.selectContainer(container)">
              <span class="hz-container-title truncate"
                    uib-tooltip="{$ container.name $}"
                    uib-tooltip-placement="top"
                    uib-tooltip-popup-delay="1000"
                    uib-tooltip-trigger="mouseenter">
                {$ container.name $}
              </span>
              <span uib-tooltip="{$ 'Delete Container' | translate $}"
                    uib-tooltip-placement="top"
                    uib-tooltip-trigger="mouseenter"
                    class="fa fa-trash hz-container-delete-icon"
                    ng-if="container.name === cc.model.container.name"
                    ng-click="cc.deleteContainer(container)"></span>
              </div>
            </uib-accordion-heading>

            <div ng-if="!container.is_fetched" class="horizon-loading-bar container-pending-bar">
              <div class="progress progress-striped active">
                <div class="progress-bar"></div>
              </div>
            </div>
            <ul ng-if="container.is_fetched" class="hz-object-detail list-unstyled">
              <li class="hz-object-count row">
                <span class="hz-object-label col-lg-7 col-md-12" translate>Object Count</span>
                <span class="hz-object-val col-lg-5 col-md-12">{$ container.count $}</span>
              </li>
              <li class="hz-object-size row">
                <span class="hz-object-label col-lg-7 col-md-12" translate>Size</span>
                <span class="hz-object-val col-lg-5 col-md-12">{$ container.bytes | bytes $}</span>
              </li>
              <li class="hz-object-timestamp row">
                <span class="hz-object-label col-lg-7 col-md-12" translate>Date Created</span>
                <span class="hz-object-val col-lg-5 col-md-12">{$ container.timestamp | date $}</span>
              </li>
              <li class="hz-object-link row">
                <div class="themable-checkbox col-lg-7 col-md-12">
                  <input type="checkbox" id="id_access" ng-model="container.is_public"
                         ng-if="container.name === cc.model.container.name"
                         ng-click="cc.toggleAccess(container)">
                  <label class="hz-object-label" for="id_access" translate>Public Access</label>
                </div>
                <span class="hz-object-val col-lg-5 col-md-12">
                  <a href="{$ container.public_url $}" target="_blank"
                     ng-show="container.public_url" translate>Link</a>
                  <span ng-hide="container.public_url" translate>Disabled</span>
                </span>
              </li>
            </ul>
          </div uib-accordion-group>
        </uib-accordion>
        <div class="col-xs-12" ng-if="cc.model.containers.length == 0">
          <p><translate>No items to display.</translate></p>
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-9">
    <div ng-view class="objects_wrapper"></div>
  </div>
</div>
